# 客户端个人中心页 TAPD 需求

## 需求背景（补充业务场景与触发原因）：

在卖家顾问需求小程序中，客户需要有一个个人中心页面来查看自己的账户信息、需求统计数据，以及快速访问常用功能。目前客户无法方便地查看自己的需求统计情况，也无法快速访问个人相关的功能入口，影响了用户对自身业务状态的了解和管理效率。个人中心作为小程序的核心页面之一，需要提供完整的用户信息展示、数据统计和功能导航能力。

## 需求价值（补充对业务的价值）：

1. **提升用户体验**：提供统一的个人中心入口，方便用户查看个人信息和业务数据
2. **增强用户粘性**：通过数据统计展示，让用户了解自己的业务状态，增强使用频率
3. **优化功能导航**：集中展示常用功能入口，提高功能访问效率
4. **完善用户体系**：建立完整的用户信息管理机制，为后续功能扩展打下基础

## 需求目标（说明该需求要解决的问题或达成的目标）：

1. 为客户提供个人中心页面，展示用户基本信息和需求统计数据
2. 提供快速访问常用功能的入口，包括我的需求等
3. 支持用户退出登录功能，保障账户安全
4. 作为底部导航栏的"我的"标签页，与其他页面形成完整的导航体系

## 用户故事（不同的视角下，希望的结果）：

**作为客户**：
- 我希望在个人中心页面能够看到我的基本信息，包括姓名和手机号
- 我希望能够查看我的需求统计数据，包括总需求数、已完成数和进行中数
- 我希望能够快速访问"我的需求"功能，查看我提交的所有需求
- 我希望能够访问关于我们，获取版本信息
- 我希望能够安全地退出登录，保护我的账户安全

**作为业务方**：
- 我希望通过个人中心页面展示用户数据，增强用户对平台的粘性
- 我希望通过数据统计展示，让用户了解自己的业务进展，促进更多需求提交
- 我希望提供便捷的功能入口，提高用户使用效率和满意度
- 我希望建立完整的用户体系，为后续功能扩展提供基础

## 需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

### 1. 页面入口
- 作为底部导航栏的"我的"标签页，用户点击底部导航栏的"我的"按钮进入
- 页面URL为 `customer-profile.html`
- 页面标题为"客户端 - 我的"

### 2. 页面结构
页面包含以下主要区域：
- **用户信息卡片**：展示用户头像、姓名、手机号（部分隐藏）和编辑入口
- **数据统计区域**：展示总需求、已完成、进行中三个统计数据
- **功能菜单区域**：包含"我的需求"等功能入口
- **设置菜单区域**：包含"关于我们"等设置功能
- **退出登录按钮**：提供退出登录功能
- **底部导航栏**：固定在页面底部，包含首页、需求、案例、我的四个导航项

### 3. 用户信息展示
- 显示用户头像（当前为默认图标，实际应从用户数据获取）
- 显示用户姓名（从用户数据获取）
- 显示用户手机号，手机号中间4位用星号隐藏（如：138****8888）
- 提供编辑按钮（图标），点击后应跳转到个人信息编辑页面（当前仅展示图标，功能待实现）

### 4. 数据统计展示
- **总需求**：显示用户提交的所有需求总数
- **已完成**：显示状态为已完成的需求数量
- **进行中**：显示状态为进行中的需求数量
- 统计数据通过接口从后端获取，实时更新
- 数据展示在三个并排的白色卡片中，每个卡片显示数字和标签

### 5. 功能菜单
- **我的需求**：
  - 显示列表图标和"我的需求"文字
  - 点击后跳转到需求列表页面（`customer-requirement-list.html`）
  - 右侧显示右箭头图标，表示可点击跳转

### 6. 设置菜单
- **关于我们**：
  - 显示信息图标和"关于我们"文字
  - 右侧显示版本号（如：v1.0.0）和右箭头图标
  - 点击后应跳转到关于我们页面（功能待实现）

### 7. 退出登录功能
- 在页面底部显示"退出登录"按钮
- 按钮样式为白色背景、红色文字
- 点击后应弹出确认对话框，提示用户确认退出
- 用户确认后，清除登录状态，跳转到登录页面

### 8. 底部导航栏
- 固定在页面底部，包含四个导航项：首页、需求、案例、我的
- 当前页面（我的）的图标和文字使用主色调（蓝紫色 #6366f1）高亮显示
- 其他导航项使用灰色显示
- 点击各导航项可跳转到对应页面
- 支持键盘导航（Tab键和Enter键）
- 适配iPhone X等设备的安全区域

### 9. 数据接口规则
- **用户信息接口**：`/api/user/profile`
  - 返回用户基本信息：id、name、phone、avatar等
  - 手机号在前端进行脱敏处理
  
- **统计数据接口**：`/api/user/statistics`
  - 返回需求统计数据：total_requirements、completed_requirements、in_progress_requirements
  - 数据实时计算，确保准确性

### 10. 异常处理
- 如果用户未登录，应跳转到登录页面
- 如果接口请求失败，显示友好的错误提示
- 如果统计数据为0，正常显示数字0
- 如果用户头像加载失败，显示默认头像图标

### 11. 页面适配
- 页面最大宽度414px，适配移动端显示
- 底部导航栏需要考虑安全区域适配（iPhone X等设备）
- 支持响应式布局，适配不同屏幕尺寸
- 底部导航栏高度64px，确保点击区域足够大（最小44px）

## 验收标准（列出明确、可验证的交付标准）：

1. **页面展示**：
   - ✅ 页面能够正确加载并展示用户头像、姓名和脱敏后的手机号
   - ✅ 数据统计区域能够正确显示总需求、已完成、进行中三个数据
   - ✅ 功能菜单和设置菜单能够正确显示，图标和文字对齐
   - ✅ 退出登录按钮正确显示在页面底部

2. **数据加载**：
   - ✅ 用户信息通过接口 `/api/user/profile` 从后端获取
   - ✅ 统计数据通过接口 `/api/user/statistics` 从后端获取，实时更新
   - ✅ 手机号在前端正确进行脱敏处理（中间4位显示为星号）
   - ✅ 数据加载失败时，显示友好的错误提示

3. **交互功能**：
   - ✅ 点击"我的需求"能够正确跳转到需求列表页面
   - ✅ 点击"关于我们"能够跳转到关于我们页面（如已实现）
   - ✅ 点击退出登录按钮能够弹出确认对话框，确认后清除登录状态并跳转到登录页
   - ✅ 点击底部导航栏各导航项能够正确跳转到对应页面
   - ✅ 当前页面（我的）在底部导航栏中正确高亮显示

4. **数据接口**：
   - ✅ 后端提供用户信息接口 `/api/user/profile`，返回用户基本信息
   - ✅ 后端提供统计数据接口 `/api/user/statistics`，返回需求统计数据
   - ✅ 接口返回数据格式包含所有必需字段
   - ✅ 接口能够处理未登录情况，返回401状态码

5. **异常处理**：
   - ✅ 用户未登录时，自动跳转到登录页面
   - ✅ 网络请求失败时，显示友好的错误提示
   - ✅ 用户头像加载失败时，显示默认头像图标
   - ✅ 统计数据为0时，正常显示数字0

6. **页面适配**：
   - ✅ 页面在移动端（最大宽度414px）能够正常显示
   - ✅ 底部导航栏在iPhone X等设备上能够正确适配安全区域
   - ✅ 页面在不同屏幕尺寸下布局正常，无内容溢出或显示异常
   - ✅ 底部导航栏点击区域足够大（最小44px），符合移动端交互规范

7. **性能要求**：
   - ✅ 页面加载时间不超过2秒
   - ✅ 数据统计接口响应时间不超过500ms
   - ✅ 页面滚动流畅，无卡顿现象

8. **安全性要求**：
   - ✅ 手机号在前端正确进行脱敏处理，不显示完整手机号
   - ✅ 退出登录时，正确清除所有登录凭证和用户数据
   - ✅ 未登录用户无法访问个人中心页面